<!-- 样式优先级：@import < link引入 < 内部样式 < 内联样式 < !important -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../css/css-demo.css" />
    <title>Document</title>
    <!-- 内部样式表，在head里面style标签内部 -->
    <style>
      p {
        color: red;
        font-size: 20px;
      }

      /* #secondP {
      background-color: rgb(23, 43, 122);
    } */

      .secondP {
        background-color: rgb(23, 43, 122);
      }

      h1 {
        color: #abcdef;
      }
    </style>
  </head>

  <body>
    <a href="#bottom">跳到底部</a>
    <!-- 内联样式：在标签上加style生成 -->
    <h1 style="font-size: 16px">标题</h1>
    <p style="font-size: 22px">
      第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字第一段文字
    </p>
    <p id="secondP" class="secondP">第二段文字</p>
    <div style="margin-bottom: 20px" class="span-container">
      <span class="first-div">111</span>
      <span class="second-div"></span>
      <input type="text" placeholder="请输入" />
    </div>

    <div class="my-poem">
      <div data-title="true">《关雎》</div>
      <div data="aa">关关雎鸠，在河之洲。窈窕淑⼥，君⼦好逑。</div>
      <div data="aa bb">参差荇菜，左右流之。窈窕淑⼥，寤寐求之。</div>
      <div data="aa-bb">求之不得，寤寐思服。悠哉悠哉，辗转反侧。</div>
      <div data="aabb">参差荇菜，左右采之。窈窕淑⼥，琴瑟友之。</div>
      <div data="bbaacc">参差荇菜，左右芼之。窈窕淑⼥，钟⿎乐之。</div>
    </div>

    <ul>
      <li>11</li>
      <li>222</li>
      <li>333</li>
    </ul>
    <!-- 当子容器宽高超出父容器宽高时可能会出现滚动 -->
    <div class="father-wrap">
      <div class="child-wrap">111111</div>
    </div>

    <a href="https://www.baidu.com" target="_blank">链接</a>

    <div id="bottom">
      <img src="../img/myimg.jpeg" usemap="#example-map" />
      <map name="example-map">
        <area
          shape="rect"
          coords="34,44,270,350"
          href="http://example.com"
          alt="Example"
      /></map>
    </div>
    <!-- <div>
      <input type="text" />
      <input type="checkbox" id="check-all" /><label for="check-all"
        >全选/全不选</label
      >
    </div> -->

    <!-- 全选半选关联 -->
    <div>
      <input type="checkbox" id="check-all" />
      <label for="check-all">全选</label>
    </div>
    <div>
      <input type="checkbox" class="checkbox-item" />
      <label for="check-all">选项1</label>
      <input type="checkbox" class="checkbox-item" />
      <label for="check-all">选项2</label>
      <input type="checkbox" class="checkbox-item" />
      <label for="check-all">选项3</label>
    </div>
  </body>
  <script>
    // document.getElementById("check-all").indeterminate = true;

    document.addEventListener("DOMContentLoaded", function () {
      var checkedAll = document.getElementById("check-all");
      var checkboxes = document.querySelectorAll(".checkbox-item");
      console.log(checkboxes);

      // 定义更新全选状态的函数
      function updateCheckAll() {
        var checkCount = 0;
        checkboxes.forEach(function (checkbox) {
          if (checkbox.checked) {
            checkCount++;
          }
          checkedAll.checked = checkCount === checkboxes.length; //全选
          checkedAll.indeterminate =
            checkCount > 0 && checkCount < checkboxes.length; //半选
        });
      }

      // 全选变化
      checkedAll.addEventListener("change", function () {
        console.log("ddd");
        checkboxes.forEach(function (checkbox) {
          checkbox.checked = checkedAll.checked;
        });
      });

      // 子项变化
      checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener("change", updateCheckAll);
      });
    });
  </script>
</html>
